import React from "react";
import MenuConfig from '../../config/index'
import * as Icon from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { selectMenuList } from '../../store/reducers/tab'

import {  Layout, Menu } from 'antd';
const { Sider } = Layout;
// 定义动态获取icon
const IconToElement = (name) => React.createElement(Icon[name])

// 处理菜单的数据
const items = MenuConfig.map((icon) => {
    // 没有子菜单
    const child = {
        key: icon.path,
        icon: IconToElement(icon.icon),
        label: icon.label
    }
    // 有子菜单
    if(icon.children) {
        child.children = icon.children.map(item => {
            return {
                key: item.path,
                label: item.label
            }
        })
    }
    return child
})




const CommonAside = ({ collapsed }) => {
    const navigate = useNavigate()
    const  dispatch = useDispatch()

    // 添加数据到store
    const setTabsList= (val) => {
        dispatch(selectMenuList)
    }
    // 点击菜单
    const selectMenu = (e) => {
        console.log(e);
        let data
        MenuConfig.forEach(item => {
            // 找到当前的数据
            if (item.path === e.keyPath[e.keyPath.length - 1]) {
                data = item
                if (e.keyPath.length > 1) {
                    data = item.children.find(child => {
                        return child.path == e.key
                    })
                }
            }
        })
        setTabsList({
            path: data.path,
            name: data.name,
            laber: data.label
        })
        navigate(e.key)
    }
    return (
        <Sider trigger={null} collapsed={collapsed}>
                <h3 className="app-name">{collapsed ? '后台':'通用后台管理系统'}</h3>
                <div className="demo-logo-vertical" />
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={items}
                    style={{
                        height: '100%'
                    }}
                    onClick={selectMenu}
                />
            </Sider>
    )
} 

export default CommonAside